<script setup>
import { receiveCoupon, getCouponDetail } from '@/api/my'; // 引用你的请求工具
//响应式变量
const couponId = ref(0);
// const background = ref('@/static/images/mini_coupon_receive.png');
const coupon = ref({});

const filters = {
  toTimeByDay: (date) => {
    // 假设你有一个将日期转换为天的过滤器
    return new Date(date).toLocaleDateString();
  }
};

//扫码获取优惠券详情
const fetchCouponDetail = async (url) => {
  const id = url.replace(/[^0-9]/gi, '');
  couponId.value = id;
  try {
    const res = await getCouponDetail(id);
    console.log('扫码获取优惠券详情------>getCouponDetail', res);
    if (res && res.data) {
      coupon.value = res.data;
    }
  } catch (error) {
    console.error('获取优惠券详情失败:', error);
  }
};

//点击领取
const receive = async () => {
  try {
    const res = await receiveCoupon(couponId.value);
    console.log('点击领取-------->receiveCoupon', res);
    uni.removeStorage({ key: 'couponUrl', data: '' });
    if (res.code === 200) {
      uni.showModal({
        title: '提示',
        content: '领取成功!',
        confirmText: '优惠券',
        cancelText: '首页',
        success: (a) => {
          if (a.confirm) {
            uni.navigateTo({ url: '/pages/coupon/coupon' });
          } else if (a.cancel) {
            uni.navigateTo({ url: '/pages/home/home' });
          }
        }
      });
    } else {
      uni.showModal({
        title: '提示',
        content: res.msg,
        confirmText: '优惠券',
        cancelText: '首页',
        success: (a) => {
          if (a.confirm) {
            uni.navigateTo({ url: '/pages/coupon/coupon' });
          } else if (a.cancel) {
            uni.navigateTo({ url: '/pages/home/home' });
          }
        }
      });
    }
  } catch (error) {
    console.error('领取优惠券失败:', error);
  }
};

/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
  let url;
  if (options.q) {
    url = decodeURIComponent(options.q);
  } else {
    url = uni.getStorageSync('couponUrl');
  }
  uni.setStorage({ key: 'couponUrl', data: url });
  fetchCouponDetail(url);
});
</script>

<template>
  <view class="receive" style="background:url('/static/images/icon_coupon_receive.png') no-repeat center center/ cover; 100%,100%;">
    <view class="top" style="border-bottom: dashed 3rpx; color: #2185f5">
      <image class="img" src="@/static/images/icon_coupon_3.png"></image>
      <view class="couponName">{{ coupon.name }}</view>
      <view class="couponTime">
        <view class="time" style="color: #2185f5">{{ coupon.discountTime / 60 }}</view>
        <view class="unit" style="color: #2185f5">小时</view>
      </view>
    </view>
    <view class="coupon">
      <view class="text_1">优惠券使用规则:</view>
      <view class="text_2 first">1.优惠时长内归还不收费</view>
      <view class="text_2">2.有效期：{{ filters.toTimeByDay(coupon.expirationDateStart) }}-{{ filters.toTimeByDay(coupon.expirationDateEnd) }}</view>
      <view class="text_2">3.适用范围：{{ coupon.available }}</view>
    </view>
  </view>
  <view class="buttom" style="background-color: #2185f5" @click="receive">
    <view class="text_3">去领取</view>
  </view>
</template>

<style lang="scss">
$light-color: #ececec;
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: $light-color;
}
.receive {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 60rpx 0 0rpx 60rpx;
  width: 630rpx;
  height: 860rpx;
  .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 592rpx;
    width: 444rpx;
    .img {
      margin-top: 70rpx;
      width: 130rpx;
      height: 130rpx;
    }
    .couponName {
      margin-top: 16rpx;
      font-size: 50rpx;
      font-weight: bold;
      color: rgba(254, 96, 25, 1);
    }
    .couponTime {
      margin-top: 30rpx;
      display: flex;
      .time {
        font-size: 180rpx;
        font-weight: bold;
        color: rgba(254, 96, 25, 1);
      }
      .unit {
        margin-top: 170rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: rgba(253, 91, 10, 1);
      }
    }
  }
}
.coupon {
  width: 444rpx;
  .text_1 {
    font-size: 30rpx;
    font-weight: bold;
    color: rgba(79, 79, 79, 1);
    margin-top: 40rpx;
  }
  .text_2 {
    font-size: 30rpx;
    font-weight: 400;
    color: rgba(79, 79, 79, 1);
  }
  .text_2.first {
    margin-top: 20rpx; /* 设置距离顶部的距离 */
  }
}
.buttom {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  width: 650rpx;
  height: 90rpx;
  border-radius: 50rpx;
}
.text_3 {
  font-size: 40rpx;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}
</style>
